<template>
	<view>
		<nav-bar title="注册" leftIcon="back" @click-left="back"></nav-bar>
		<logo></logo>
		<view class="padding flex flex-direction">
			<view class="cu-form-group margin-lr">
				<view class="title text-bold">
					+86
					<icon-font type="arrowdown" size="14" class="padding-left-xs"></icon-font>
				</view>
				<input type="number" placeholder="请输入手机号" v-model="mobile" />
			</view>
			<view class="cu-form-group margin-lr">
				<view class="title">验证码</view>
				<input type="number" placeholder="请输入验证码" v-model="code" />
				<verfication-code :mobile="mobile" type="register"></verfication-code>
			</view>
			<view class="cu-form-group margin-lr">
				<view class="title">邀请码</view>
				<input type="text" placeholder="请输入邀请码" v-model="inviteCode" />
			</view>
			<view class="margin flex align-center justify-between">
				<view></view>
				<navigator class="text-underline" hover-class="none" url="main">手机号登录</navigator>
			</view>
			<userButton @submitEvent="register">注册</userButton>
		</view>
		<dialog-box :modalName="modalName" @skinInviteCode="skinInviteCode" @inputInviteCode="inputInviteCode" @noShouQuan="noShouQuan" @tbShouQuan="tbShouQuan"></dialog-box>
		<annotation></annotation>
		<loading :loadModal="loadModal"></loading>
	</view>
</template>

<script>
import logo from '@/pages/access/components/logo.vue';
import annotation from '@/pages/access/components/annotation.vue';
import verficationCode from '@/components/verfication-code.vue';
import userButton from '@/components/user-button.vue';
var _self; //this容器
export default {
	components: {
		logo,
		annotation,
		verficationCode,
		userButton
	},
	data() {
		return {
			mobile: '',
			code: '',
			inviteCode: '',
			/* password: '', */
			modalName:'',
			/* modalName:'', */
			showInviteCodeModal: false,
			loadModal: false //蒙层
		};
	},
	onLoad(options) {
		_self = this;
		if (options.type) {
			_self.type = options.type;
		}
	},
	methods: {
		register() {
			if (_self.$util.checkMobile(_self.mobile) && _self.$util.checkCode(_self.code)) {
				if (_self.inviteCode.length == 0 && !_self.showInviteCodeModal) {
					/* uni.showInviteCodeModal({
						title: '',
						content: '       请输入邀请码',
						cancelText: '跳过',
						confirmText: '输入',
						confirmColor: '#e03997',
						success: function(res) {
							if (res.confirm) {
								_self.showInviteCodeModal = true;
							} else if (res.cancel) {
								_self.userRegister();
							}
						}
					}); */
					_self.modalName='invitecode';
				} else {
					_self.userRegister();
				}
			}
		},
		//用户注册
		userRegister() {
			const param = {
				mobilePrefix: '+86',
				mobile: _self.mobile,
				verifyCode: _self.code
			};
			if (_self.inviteCode.length > 0) {
				param.inviteCode = _self.inviteCode;
			}
			_self.loadModal = true;
			_self.$http.httpNoCookieRequest('user/registerAndLogin', param, false).then(res => {
				_self.loadModal = false;
				if (res) {
					if (res.statusCode == 200) {
						const tmpres = res.data;
						_self.$util.clearUserStorage();
						if (tmpres._tranStatus) {
							let cookies = res.header['Set-Cookie'];
							uni.setStorageSync('JSESSIONID', cookies.split(';')[0]);
							uni.setStorageSync('login_token', tmpres._data.loginToken);
							_self.$util.setUserStorage(tmpres._data);
							_self.modalName="tbshouquan";
						} else {
							_self.code = '';
							_self.$util.msg(tmpres._exceptionLocalizedMessage);
						}
					} else {
						_self.password = '';
						_self.$util.msg('无法连接服务器');
					}
				} else {
					_self.password = '';
					_self.$util.msg('系统异常res为空');
				}
			});
		},
		skinInviteCode(){
			//跳过邀请码输入
			_self.modalName="";
			_self.userRegister();
		},
		inputInviteCode(){
			//输入邀请码
			_self.modalName="";
			_self.showInviteCodeModal = true;
		},
		noShouQuan() {
			//暂不淘宝授权
			_self.modalName="";
			uni.switchTab({
				url: '../user/main'
			});
		},
		tbShouQuan() {
			//淘宝授权
			_self.modalName="";
			_self.$util.ExistRelationId();
			uni.switchTab({
				url: '../user/main'
			});
		},
		/* 取消设置 */
		back() {
			uni.navigateBack({ delta: 1 });
		},
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>
